<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <title>学生管理</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="../static/css/common.css">
    <link rel="stylesheet" href="../static/element-ui/lib/theme-chalk/index.css">
    <script type="text/javascript">
        var html = document.getElementsByTagName("html")[0];
        var w = document.documentElement.clientWidth || document.body.clientWidth;
        html.style.fontSize = w / 1366 + "px";
    </script>
    <script src="../static/js/vue.js"></script>
    <script src="../static/element-ui/lib/index.js"></script>
    <script src="../static/js/jquery-2.2.3.min.js"></script>
    <!--富文本资源文件-->
    <script type="text/javascript" charset="utf-8" src="../static/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="../static/ueditor.all.min.js"></script>
</head>
<body style="background-color:#f1f7fe;">
<div id="cus_IndexApp" v-cloak>
    <div>
        <el-button type="success" icon="fa fa-user-plus" size="mini" @click="add">&nbsp;新增</el-button>
        <el-input placeholder="请输入学号" v-model="soMoreUserIpt.username" size="mini" class="top_divR"
                  clearable></el-input>
        <el-select v-model="soMoreUserIpt.special_subject_id" placeholder="请选择专业" size="mini" class="top_divR"
                   clearable>
            <el-option
                    v-for="item in classOptionsspecial_subject_id"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
            </el-option>
        </el-select>
        <el-button size="mini" type="warning" style="background-color:#fd8c12;" @click="handleCurrentChange(1)">搜索
        </el-button>
    </div>
    <div class="cusMTable">
        <el-table :data="cusTableLstInit" style="width: 100%;"
                  :header-cell-style="{background:'#004d8c',color:'#FFFFFF','line-height':'50px',height:'50px'}">
            <el-table-column
                    prop="username"
                    label="学号">
            </el-table-column>
            <el-table-column
                    prop="nickname"
                    label="姓名">
            </el-table-column>

            <el-table-column
                    prop="id_card"
                    label="身份证号">
            </el-table-column>

            <el-table-column
                    prop="dormitory_number"
                    label="宿舍号">
            </el-table-column>

            <el-table-column
                    prop="credit"
                    label="学分绩">
            </el-table-column>

            <el-table-column
                    prop="sex"
                    label="性别">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.sex==1">男</el-tag>
                    <el-tag type="danger" v-else-if="scope.row.sex==2">女</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="联系方式">
            </el-table-column>
            <el-table-column
                    prop="CET_4"
                    label="四级">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.CET_4==1">已过</el-tag>
                    <el-tag type="danger" v-else-if="scope.row.CET_4==2">未过</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="class_manage_name1"
                    label="班级">
            </el-table-column>
            <el-table-column
                    prop="special_subject_name1"
                    label="专业">
            </el-table-column>
            <el-table-column
                    prop="early_warning"
                    label="预警">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.early_warning==1">正常</el-tag>
                    <el-tag style="background-color: blue;color: white;"  v-else-if="scope.row.early_warning==2">蓝色</el-tag>
                    <el-tag type="warning"  v-else-if="scope.row.early_warning==3">黄色</el-tag>
                    <el-tag type="danger" v-else-if="scope.row.early_warning==4">红色</el-tag>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="280">
                <template slot-scope="scope">
                    <el-button @click="edit(scope.row)" type="primary" size="small">编辑</el-button>
                    <el-button type="danger" size="small" @click="del(scope.row)">删除</el-button>
                    <el-button type="warning" size="small" @click="openYj(scope.row)">学业预警</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="text-align:right;">
            <el-pagination @current-change="handleCurrentChange" :current-page="pageInit.currentPage" :page-size="10"
                           layout="total, prev, pager, next, jumper" :total="pageInit.totalResult">
            </el-pagination>
        </div>
    </div>
    <el-dialog :title="titleName" :visible.sync="addNewCustomer" width="60%" top="5vh">
        <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="学号">
                <el-input v-model="ruleForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input type="password" v-model="ruleForm.password"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="ruleForm.nickname"></el-input>
            </el-form-item>


            <el-form-item label="身份证号">
                <el-input v-model="ruleForm.id_card"></el-input>
            </el-form-item>

            <el-form-item label="宿舍号">
                <el-input v-model="ruleForm.dormitory_number"></el-input>
            </el-form-item>

            <el-form-item label="性别">
                <el-select v-model="ruleForm.sex" placeholder="请选择性别">
                    <el-option label="男" :value="1"></el-option>
                    <el-option label="女" :value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="联系方式">
                <el-input v-model="ruleForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="四级">
                <el-select v-model="ruleForm.CET_4" placeholder="请选择四级">
                    <el-option label="已过" :value="1"></el-option>
                    <el-option label="未过" :value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="专业">
                <el-select v-model="ruleForm.special_subject_id" placeholder="请选择专业"
                           @change="getClassOptionsclass_manage_id">
                    <el-option
                            v-for="item in classOptionsspecial_subject_id"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="班级">
                <el-select v-model="ruleForm.class_manage_id" placeholder="请选择班级">
                    <el-option
                            v-for="item in classOptionsclass_manage_id"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" style="margin-left:35%" @click="submitForm">立即保存</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <el-drawer
            title="学业预警"
            :visible.sync="drawerFlag"
            direction="rtl"
            size="50%"
            :before-close="handleClose">
        <div>
            <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="姓名学号">
                    <div>【{{ruleForm.username}}】{{ruleForm.username}}</div>
                </el-form-item>
                <el-form-item label="专业班级">
                    <div>{{ruleForm.special_subject_name1}}-{{ruleForm.class_manage_name1}}</div>
                </el-form-item>
                <el-form-item label="预警">
                    <el-tag type="success" v-if="jsearly_warning==1">正常</el-tag>
                    <el-tag style="background-color: blue;color: white;"  v-else-if="jsearly_warning==2">蓝色</el-tag>
                    <el-tag type="warning"  v-else-if="jsearly_warning==3">黄色</el-tag>
                    <el-tag type="danger" v-else-if="jsearly_warning==4">红色</el-tag>
                </el-form-item>
<!--                <el-form-item>-->
<!--                    <el-button type="success" style="margin-left:35%" @click="submitYjForm">设置学业预警</el-button>-->
<!--                </el-form-item>-->
            </el-form>
        </div>
        <div>
            <div class="conYj" style="color: #fd8c12;">该学生学业情况</div>
            <div class="conYj">是否毕业班级：<label>{{ruleForm.class_manage_is_graduate1==1 ? '毕业班' :
                '正常班'}}</label></div>
            <div class="conYj">是否通过四级：<label>{{ruleForm.CET_4==1 ? '已过' : '未过'}}</label></div>
            <div class="conYj">必修课程不及格数：<label>{{gradeObj.bxbjg}}</label></div>
<!--            <div class="conYj">核心课程平均绩点：<label>{{gradeObj.hxpjjd}}</label></div>-->
            <div class="conYj">核心课程不及格学分之和：<label>{{gradeObj.hxbjgxf}}</label></div>
            <div class="conYj">所有课程不及格数：<label>{{gradeObj.bjgnum}}</label></div>
            <div class="conYj">学分绩：<label>{{gradeObj.credit}}</label></div>
            <div class="conYj">违纪记录条数：<label>{{wjList.length}}</label></div>
        </div>
        <div>
            <div class="conYj" style="color: #fd8c12;">该学生违纪记录</div>
            <div class="conYj" v-for="(item,index) in wjList" :key="index">
                {{index+1}}.【{{item.violation_type_name1}}】{{item.content}}
            </div>
            <div class="conYj" v-if="wjList.length==0">暂无违纪记录</div>
        </div>
    </el-drawer>
</div>
</body>
<script th:inline="javascript">
    var ue = null;
    var basePath = "/" + window.location.pathname.split("/")[1];
    let app = window.parent.App;
    new Vue({
        el: "#cus_IndexApp",
        data() {
            return {
                pageInit: {
                    currentPage: 1,
                },
                cusTableLstInit: [],
                soMoreUserIpt: {},
                addNewCustomer: false,
                ruleForm: {},
                titleName: "新增",
                classOptionsclass_manage_id: [],
                classOptionsspecial_subject_id: [],
                classOptions: [],
                userObj: [],
                tenantList: [],
                uploadUrl: basePath,
                drawerFlag: false,
                jsearly_warning: '',
                wjList: [],
                gradeObj: [],
            }
        },
        mounted() {
            this.userObj = JSON.parse(localStorage.getItem("userInfo"));
            ;
            this.handleCurrentChange(1);
            this.getClassOptionsspecial_subject_id();
        },
        methods: {
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            openYj(row) {
                console.log(row)
                this.ruleForm = row;
                this.gradeObj = {
                    bxbjg: 0,   //不及格
                    hxpjjd: 0,  //核心课程平均绩点
                    hxbjgxf: 0, //核心课程不及格学分之和
                    bjgnum: 0, //不及格数量
                    credit:row.credit
                };

                //预警标识
                this.jsearly_warning = '';
                let that = this;
                //获得违纪列表
                $.ajax({
                    type: "GET",
                    url: `${basePath}/stu_violation/queryStuViolationKey`,
                    data: {app_user_id: row.id},
                    success: function (data) {
                        that.wjList = data.data;
                    }
                })
                //获取成绩管理数据
                $.ajax({
                    type: "GET",
                    url: `${basePath}/result_manage/queryResultManageKey`,
                    data: {app_user_id: row.id},
                    success: function (res) {
                        let hxjd = 0;
                        let hxnum = 0;
                        for (let item of res.data) {
                            if (item.a_type == 2 && item.score < 60) {
                                //不及格
                                that.gradeObj.bxbjg += 1;
                            }
                            if (item.a_type == 1) {
                                hxnum += 1;
                                hxjd += item.grade_point;
                            }
                            if (item.a_type == 1 && item.score < 60) {
                                that.gradeObj.hxbjgxf += item.course_manage_credit1;
                            }
                            if (item.score < 60) {
                                that.gradeObj.bjgnum += 1;
                            }
                        }



                        that.gradeObj.hxpjjd = (hxjd / hxnum).toFixed(2);

                        setTimeout(() => {
                            that.drawerFlag = true;
                            console.log('总不及格数量'  + that.gradeObj.bjgnum);
                            console.log("自动计算每一科课程，1~3科不及格为蓝色，\n" +
                                "4~5科不及格为黄色，五颗以上为红色");
                            if(that.gradeObj.bjgnum>=1&&that.gradeObj.bjgnum<=3){
                                that.jsearly_warning = 2
                            }else if(that.gradeObj.bjgnum>=4&&that.gradeObj.bjgnum<=5){
                                that.jsearly_warning = 3
                            }else if(that.gradeObj.bjgnum>5){
                                that.jsearly_warning = 4
                            }else{
                                that.jsearly_warning = 1

                            }
                            that.submitYjForm()
                            //自动设置预警值
                        }, 500)
                        //不再根据平均数据算
                        // setTimeout(() => {
                        //     that.drawerFlag = true;
                        //     if (that.ruleForm.class_manage_is_graduate1 == 1) {
                        //         if (that.gradeObj.bjgnum) {
                        //             that.jsearly_warning = 4;
                        //         }
                        //     } else {
                        //         if (that.gradeObj.bxbjg >= 6 || that.gradeObj.hxbjgxf >= 15 || that.gradeObj.hxpjjd < 2) {
                        //             that.jsearly_warning = 3;
                        //         } else if (that.gradeObj.bxbjg >= 3) {
                        //             that.jsearly_warning = 2;
                        //         }
                        //     }
                        // }, 500)
                    }
                })


            },
            submitYjForm() {
                console.log(this.ruleForm);
                console.log(this.jsearly_warning);
                let that = this;
                $.ajax({
                    type: "GET",
                    url: basePath + "/app_user/updateAppUser",
                    data: {id: that.ruleForm.id, early_warning: that.jsearly_warning},
                    success: function (res) {
                        if (res.status == 0) {
                            // that.drawerFlag = false;
                            // that.$message.success('学业预警设置成功！');
                            // that.handleCurrentChange(1);
                        }
                    }
                })

            },
            windowOpen(url) {
                window.open(url);
            },
            add() {
                this.titleName = "新增";
                this.ruleForm = {};
                this.addNewCustomer = true;
                this.getClassOptionsclass_manage_id();
                this.getClassOptionsspecial_subject_id();
            },
            edit(row) {
                this.titleName = "编辑";
                this.ruleForm = row;
                this.addNewCustomer = true;
                this.getClassOptionsclass_manage_id();
                this.getClassOptionsspecial_subject_id();
            },
            getClassOptionsclass_manage_id(val) {
                let that = this;
                $.ajax({
                    type: "GET",
                    url: `${basePath}/class_manage/queryClassManageKey`,
                    data: {special_subject_id: val},
                    success: function (data) {
                        that.classOptionsclass_manage_id = data.data;
                    }
                })
            },
            getClassOptionsspecial_subject_id() {
                let that = this;
                $.ajax({
                    type: "GET",
                    url: `${basePath}/special_subject/querySpecialSubjectKey`,
                    data: {},
                    success: function (data) {
                        that.classOptionsspecial_subject_id = data.data;
                    }
                })
            },
            submitForm() {
                let that = this;
                if (this.titleName == "新增") {
                    this.ruleForm.early_warning = 1;
                    $.ajax({
                        type: "GET",
                        url: basePath + "/app_user/addAppUserNo",
                        data: that.ruleForm,
                        success: function (res) {
                            console.log(res);
                            if (res.status == 0) {
                                that.addNewCustomer = false;
                                that.handleCurrentChange(1);
                            }
                        }
                    })
                } else {
                    $.ajax({
                        type: "GET",
                        url: basePath + "/app_user/updateAppUser",
                        data: that.ruleForm,
                        success: function (res) {
                            if (res.status == 0) {
                                that.addNewCustomer = false;
                                that.handleCurrentChange(1);
                            }
                        }
                    })
                }
            },
            changeSearchFlag() {
                this.topSearchFlag = false;
            },
            handleCurrentChange(val) {
                this.loading = true;
                this.soMoreUserIpt.currentPage = val;
                let that = this;
                $.ajax({
                    type: "GET",
                    url: `${basePath}/app_user/queryPageAppUserKeyList`,
                    data: that.soMoreUserIpt,
                    success: function (data) {
                        that.cusTableLstInit = data.rows;
                        that.pageInit.totalResult = data.total;
                        that.pageInit.currentPage = val;
                        that.loading = false;
                    }
                })
            },
            del(row) {
                var that = this;
                that.$confirm("确认删除该信息!", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    $.ajax({
                        type: "GET",
                        url: `${basePath}/app_user/deleteAppUser`,
                        data: {id: row.id},
                        success: function (data) {
                            if (data.status == 0) {
                                that.$message({
                                    type: "success",
                                    message: "删除成功"
                                });
                                that.handleCurrentChange(1);
                            }
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
            },
        }
    })
</script>
</html>


